<template>
	<view class="address">
		<u-swipe-action-item v-for="(item, index) in tableData" :key="index" :options="addressOptions"
			@click="removeAddress">
			<view class="address-item">
				<view class="address-item-header flex mb10">
					<text class="fs14" style="color: #606266">{{
            item.name || "未命名用户"
          }}</text>
					<text class="fs14" style="color: #606266">，{{ item.phone || "" }}</text>
				</view>
				<view class="address-item-content mb10 fs14" style="color: #606266">{{
          item | addressFilter
        }}</view>
				<u-line />
				<view class="address-item-footer mb5 mt5 flex">
					<u-radio-group v-model="item.isDefault" @change="groupChange(item.id)">
						<u-radio shape="circle" label="默认" inactiveColor="#909399" labelColor="#909399"
							activeColor="#ea64a2" :name="true" />
					</u-radio-group>
					<view class="flex">
						<view class="mr10">
							<u-button text="修改" size="mini" plain @click="toAddressModify(item.id)" />
						</view>
						<u-button text="删除" size="mini" plain @click="removeAddress(item.id)" />
					</view>
				</view>
			</view>
		</u-swipe-action-item>
		<Cbottomview>
		<view class="address_menu">
			<u-button text="添加收货地址" icon="plus" iconColor="#fff" @click="toAddressModify" />
		</view>
		</Cbottomview>
	</view>
</template>

<script>
	// #ifdef APP-NVUE
	const dom = uni.requireNativePlugin("dom");
	// #endif
	export default {
		name: "Address", // 地址管理
		options: {
			styleIsolation: "shared"
		}, // 父组件设置 options.styleIsolation 可穿透子组件，以及页面
		filters: {
			// 地址详情拼接
			addressFilter(item) {
				return `${item.province}${item.city}${item.county}${
        item.addressDetail || ""
      }`;
			},
		},
		data() {
			return {
				addressOptions: [
					// 滑动按钮文案
					{
						text: "删除",
					},
				],
				loading: true, // 加载状态
				tableData: [], // 主数据
				addressMenuHeight: 0, // 获取底部按钮可视化高度（适配全面屏）
			};
		},
		// 页面周期函数--监听页面加载
		onLoad() {},
		// 页面周期函数--监听页面初次渲染完成
		onReady() {},
		// 页面周期函数--监听页面显示(not-nvue)
		onShow() {
			this.getList();
			this.setPlaceholderHeight();
		},
		methods: {
			openAddAddress() {

			},
			// 选择默认地址回调
			async groupChange(addressId) {
				const {
					code
				} = await this.$address.addressDefaultAddress({
					id: addressId,
					isDefault: true,
				});
				if (code === 0) {
					this.showToast("设置成功");
					this.getList();
				}
			},
			// 初始化
			async getList() {
				this.loading = true;
				const {
					code,
					data
				} = await this.$address.addressGetList();
				if (code === 0) {
					this.tableData = data;
					this.loading = false;
				}
			},
			// 跳转至修改地址页（增加页）
			toAddressModify(id) {
				uni.navigateTo({
					url: `/pages/address/modify/index?addressId=${id || ''}`,
					animationType: "pop-in",
					animationDuration: 200,
				});
			},
			// 删除地址
			removeAddress(id) {
				uni.showModal({
					content: "确定要删除吗？",
					confirmText: "删除",
					confirmColor: "#fa3534",
					success: res => {
						if (res.confirm) { // 确定删除
							console.log('确定删除')
						}
					}
				});
			},
			// 获取底部按钮可视化高度（适配全面屏）
			async setPlaceholderHeight() {
				// 延时一定时间
				await uni.$u.sleep(20);
				// #ifndef APP-NVUE
				this.$uGetRect(".address_menu_content").then(({ height }) => {
				  // 修复IOS safearea bottom 未填充高度
				  this.addressMenuHeight = height;
				  console.log(this.addressMenuHeight, "高度1");
				});
				// #endif

				// #ifdef APP-NVUE
				dom.getComponentRect(this.$refs["address_menu_content"], (res) => {
				  const { size } = res;
				  this.addressMenuHeight = size.height;
				  console.log(this.addressMenuHeight, "高度2");
				});
				// #endif
			},
		},
	};
</script>

<style lang="scss" scoped>
	.address {
		padding: 20rpx 20rpx 0 20rpx;

		/deep/ .u-swipe-action-item {
			margin-bottom: 30rpx;
			border-radius: 10rpx;

			&__content {
				padding: 10rpx 20rpx;
			}

			&__right__button__wrapper {
				background-color: $uni-color-error !important;

				&__text {
					font-size: 28rpx !important;
				}
			}
		}

		&-item {
			&-header {}

			&-footer {
				/deep/ .u-radio {
					&__icon-wrap {
						width: 28rpx !important;
						height: 28rpx !important;
					}

					&__text {
						font-size: 28rpx !important;
					}
				}
			}
		}

		&_menu {
			/deep/ .u-button {
				background-color: $uni-color-primary;
				color: #fff;
			}
		}
	}
</style>
